'use strict';
import {
    StyleSheet,
    View,
    Navigator,
    Text,
    TouchableOpacity,
    TouchableHighlight,
    AlertIOS,
    ScrollView
} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import URL from '../config/server';
import {Utils} from '../config/utils';
import {Key} from '../config/key';


const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="chevron-left" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:18}}>
                        返回
                    </Text>
                </View>

            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return null;
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={{color: 'white', margin: 10, fontSize: 20}}>
                注册方式
            </Text>
        );
    }
};

export default class Register extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chuji:10,
            geren:30,
            baijin:60,
            simu:100,
            jimi:300
        }
    }

    componentWillMount() {
        this.fetchSpreadNum()
    }

    fetchSpreadNum(){
        let that = this;
        const WSTS= URL.local+'wxts';
        Utils.get1(WSTS, function (data) {
            that.setState({
                content:data
            })
        })
    }
    onPress(value) {
        console.log(value);
        this.props.navigator.push({
            id: value
        });
    }


    renderScene(route, navigator) {
        return (
            <ScrollView style={styles.container}>
                <View style={styles.buttons}>

                    <TouchableHighlight style={[styles.button,{marginBottom:0}]} onPress={this.onPress.bind(this,'RegPhone')}
                                        underlayColor='#e02820'>
                        <View style={styles.inline}>
                            <Icon name="phone" size={18} color="#ffffff" style={{alignSelf:'center',marginRight:10}}/>
                            <Text style={styles.buttonText}>手机号注册</Text>
                            <Icon name="chevron-right" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                        </View>
                    </TouchableHighlight>
                    <Text style={styles.p}>用手机号注册将会尊享更多的服务。</Text>

                    <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this,'RegQQ')}
                                        underlayColor='#e02820'>
                        <View style={styles.inline}>
                            <Icon name="qq" size={18} color="#ffffff" style={{alignSelf:'center',marginRight:10}}/>
                            <Text style={styles.buttonText}>QQ号码注册</Text>
                            <Icon name="chevron-right" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                        </View>
                    </TouchableHighlight>

                    {/*
                    <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this,'RegMail')}
                                        underlayColor='#e02820'>
                        <View style={styles.inline}>
                            <Icon name="envelope-o" size={18} color="#ffffff"
                                  style={{alignSelf:'center',marginRight:10}}/>
                            <Text style={styles.buttonText}>邮箱注册</Text>
                            <Icon name="chevron-right" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                        </View>
                    </TouchableHighlight>*/}
                    <Text style={styles.h1}>
                        温馨提示:
                    </Text>
                    <Text style={styles.p}>
                        {this.state.content}
                    </Text>

                </View>
            </ScrollView>
        );
    }


    render() {
        return (
            <Navigator
                ref='main'
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                navigationBar={
            <Navigator.NavigationBar 
                style={{backgroundColor: '#e02820', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          	}/>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 80,
        marginBottom: 15,
        backgroundColor: '#ffffff'
    },

    buttonText: {
        flex: 8,
        fontSize: 18,
        color: '#ffffff',
        textAlign: 'left',
        alignSelf: 'center',
        justifyContent: 'center'
    },
    buttons: {
        flex: 10
    },
    inline: {
        flexDirection: 'row',
        flex: 1,
        paddingLeft: 20,
        paddingRight: 20
    },
    button: {
        height: 40,
        backgroundColor: '#e02820',
        borderColor: '#e02820',
        borderTopWidth: 2,
        borderBottomWidth: 2,
        marginBottom: 20,
        justifyContent: 'center'
    },
    go: {
        flex: 3,
        alignSelf: 'center',
        fontSize: 18,
        textAlign: 'right',
        color: '#ffffff'
    },
    declare: {
        justifyContent: 'flex-end'
    },
    declareText: {
        fontSize: 15
    },
    h1: {
        fontSize: 17,
        marginLeft: 20,
        color: '#e02820'
    },
    p: {
        textAlign:'justify',
        fontSize: 14,
        padding: 10,
        paddingLeft: 20,
        paddingRight: 20,
        lineHeight: 20,
        color: "#e02820"
    }
});
